<template>
    <div class="text-box">
        <text class="text" :style="getStyle" @click="onClickItem">{{title}}</text>
    </div>
</template>

<style scoped>
    .text-box {
        padding-left: 30px;
        padding-right: 30px;
        height: 120px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .text {
        height: 68px;
        line-height: 68px;
        padding-left: 3px;
        padding-right: 3px;
        border-bottom-width: 4px;
        border-bottom-style: solid;
        font-family: msyhl;
    }
</style>

<script>
    export default{
        props: {
            index: {
                type: Number,
                default: 0
            },
            title: {
                type: String,
                default: ""
            },
            fontSize: {
                type: Number,
                default: 36
            },
            selected: {
                type: Boolean,
                default: false
            },
            scroll: {
                type: Boolean,
                default: true
            }
        },
        methods: {
            onClickItem: function (e) {
                var params = {
                    index: this.index
                };
                this.$emit('tabItemOnClick', params);
            }
        },
        computed: {
            getStyle(){
                let _obj = {};
                _obj.borderBottomColor = 'transparent';
                _obj.color = "#4d2805";

                if(this.selected) {
                    _obj.color = "#e31336";
                    _obj.borderBottomColor = "#e31336";
                }
                _obj.fontSize = this.fontSize;
                return _obj;
            }
        }
    }
</script>
